<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { message } from 'ant-design-vue';
import { api } from '@/api/api'; // 假设你的 API 请求文件路径
// import logo from "@/assets/557.png"
import { getIcon } from "@/api/assets/assets";
import { useResourceStore } from '@/stores/TeacherResource';

const props = defineProps<{
  visible: boolean;
  onClose: () => void;
  courseFileId: string;
  courseId: string;
  sortId: string | number;
  fetchCourseData: (courseFileId: string | null, load: boolean, searchValue: string) => Promise<void>;
}>();
const logo = ref<string | null>(null);
const fetchIcon = async () => {
  try {
    const data = await getIcon(['557.png']);
    logo.value = data['557.png'];
  }
  catch (error) {
    console.error('API 调用错误:', error);
  }
};

onMounted(() => {
  fetchIcon();
});

const fileList = ref<any[]>([]); // 存储上传的文件
// 处理上传
const handleUpload = async () => {
  props.onClose(); // 调用传入的关闭函数

  if (fileList.value.length === 0) {
    message.error('请先选择文件');
    return;
  }

  try {
    const formData = new FormData();
    formData.append('file', fileList.value[0].originFileObj); // 添加文件到 FormData

    const response = await api.post('/java/teacher/handlefileSource/handlefileSource_thread', formData, {
      params: {
        courseFileId: props.courseFileId,
        courseId: props.courseId,
        sortOrder: props.sortId || 0,
      },
    });
    message.success(response.data.msg || '文件加工成功');
    await props.fetchCourseData(props.courseFileId, true, '');
    // console.log("文件加工失败");
  }
  catch (error) {
    // console.log("文件加工失败");
  }
  finally {
    fileList.value = []; // 清空文件列表
  }
};

// 文件上传属性
const uploadProps = {
  multiple: false,
  beforeUpload: (file: any) => {
    fileList.value = [file]; // 只保留一个文件
    return false; // 阻止自动上传
  },
  onChange: ({ fileList: newFileList }: { fileList: any[] }) => {
    fileList.value = newFileList; // 更新文件列表
  },
  onRemove: (file: any) => {
    fileList.value = fileList.value.filter((item: any) => item.uid !== file.uid); // 过滤掉要删除的文件
  },
  action: '', // 确保不会自动触发上传
};
</script>

<template>
  <a-modal
    :open="visible"
    :footer="null"
    width="37.5rem"
    @cancel="props.onClose"
  >
    <!-- 自定义标题插槽 -->
    <template #title>
      <span style="font-size: 1.5rem;">文档上传</span> <!-- 通过内联样式设置标题字体大小 -->
    </template>
    <div class="modal-body">
      <a-tabs active-key="upload">
        <a-tab-pane key="upload" tab="文档上传">
          <div class="upload-section">
            <a-upload-dragger
              :file-list="fileList"
              :before-upload="uploadProps.beforeUpload"
              :on-change="uploadProps.onChange"
              :on-remove="uploadProps.onRemove"
              action=""
              name="file"
              accept=".pdf, .doc, .docx, .jpg, .jpeg, .png, .bmp, .htm, .html, .md, .mobi, .epub"
            >
              <div class="custom-upload-icon">
                <img :src="logo ? logo : ''" alt="上传图标">
              </div>
              <p class="upload-text">
                点击或将文件拖拽到此处上传
              </p>
            </a-upload-dragger>

            <a-button type="primary" style="margin-top: 1.25rem;" @click="handleUpload">
              确定上传
            </a-button>
            <div class="upload-tips">
              <ul style="margin-left: -1.25rem; margin-top: 1.25rem">
                <li>文档格式：支持 PDF（含扫描件）/ Word / HTML / Markdown / EPUB / Mobi</li>
                <li>文档大小：文件最大支持100M，图片最大支持20M</li>
                <li>文档页数：PDF/Word最多支持1000页</li>
              </ul>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </a-modal>
</template>

<style scoped lang="scss">
.upload-media-modal {
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }

  .modal-content {
    max-width: 600px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: relative;
    padding: 20px;
    border: 1px solid #e8eaf2;

    .close-button {
      position: absolute;
      right: 16px;
      top: 16px;
      background: none;
      border: none;
      cursor: pointer;
      font-size: 20px;
      color: #ccc;
    }

    .modal-header {
      text-align: left;
      margin-bottom: 16px;

      h2 {
        font-size: 18px;
        font-weight: normal;
        margin-bottom: 20px;
        margin-left: 20px;
      }
    }

    .modal-body {
      padding: 0px 20px 20px;

      .centralized-tabs {
        display: flex;
        justify-content: center !important;
        margin-bottom: 20px !important;

        .ant-tabs-nav {
          margin-left: 50% !important;
          justify-content: center !important
        }
      }

      .upload-section {
        .ant-upload-drag {
          min-width: 560px;
          border-radius: 4px;
          background: #f7f6fc;
          border: 1px dashed #e8eaf2;
          text-align: center;
          padding: 20px 10px;

          .custom-upload-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100px;
            width: 100px;

            img {
              max-width: 100%;
              max-height: 100%;
            }
          }

          .ant-upload-text {
            font-size: 16px;
            color: #878aab;
            margin: 16px 0;
          }

          ul {
            font-size: 14px;
            color: #666;
            padding-left: 20px;
            text-align: left;
            margin-top: 10px;
          }
        }

        .web-add-section {
          display: flex;
          align-items: center;
          gap: 10px; /* 输入框与按钮之间的间距 */
          margin-top: 20px;

          input {
            flex-grow: 1; /* 输入框占满剩余空间 */
          }

          button {
            flex-shrink: 0; /* 按钮保持固定宽度 */
          }
        }

        .upload-tips {
          ul {
            list-style-type: none; /* 去掉列表项符号 */

            li {
              position: relative;
            }

            li:before {
              content: ''; /* 移除默认的列表项符号 */
              position: absolute;
              left: 0;
            }
          }
        }
      }
    }

    .modal-footer {
      display: flex;
      justify-content: space-between; /* 使文字和按钮在同一排 */
      align-items: center;
      margin-top: 20px;
      margin-left: -20px;

      .footer-text {
        color: #878aab;
        font-size: 14px;
        margin-left: 20px;
        margin-top: 0px;

        a {
          color: #6c63ff;
        }
      }

      .footer-buttons {
        display: flex;
        justify-content: flex-end;
        margin-right: 0px;
        margin-left: 40px;
        margin-bottom: 5px;

        button {
          background-color: #fff;
          color: #878aab;
          border: 1px solid #878aab;
          margin-left: 20px;
          border-radius: 15px;

          &:hover {
            background-color: #f0f0f0;
          }
        }

        .ant-btn-primary {
          color: #fff;
          background-color: #6c63ff;
          border-color: #6c63ff;

          &:hover {
            background-color: #5548c8;
            border-color: #5548c8;
          }
        }
      }
    }
  }
}
</style>
